<template>
  <div class="detail email-detail approval-detail apply" v-show="isEndAll">
    <div class="detail-left" style="width: 100%;">
      <div class="make-title">
        <span><i @click="backPrev" title="返回上一页" class="iconfont icon-fanhui"></i>审批详情</span>
        <div>
          <el-button size="small" type="primary" v-show="row.status==3||row.status==1" @click="rebackCheck">重新提交
          </el-button>
          <el-button size="small" type="info" v-show="row.status==0" @click="cancelCheck">撤消审批</el-button>
          <el-button size="small" v-show="row.status==3||row.status==1" @click="editCheck">再次编辑</el-button>
        </div>
      </div>
      <!--审批状态-->
      <div class="status">
       <p> 审批进度：</p>
        <div>
          <span :class="`status${row.status}`">{{filterStatus(row.status)}}</span>
          <span v-show="row.status==3" style="font-size: 13px">（原因：{{row.noPassCause}}）</span>
        </div>
      </div>
      <div class="apply-detail">
        <h1 class="detail-title">审批内容</h1>
        <div class="detail-content">
          <ul>
            <li><b>审批主题：</b>{{row.approvalSubject}}</li>
            <li><b>审批内容：</b><p class="approval-content" title="查看审批邮件详情" @click="toReview"><span class="el-icon-message"></span>
              <span class="more">{{content.emailSubject}}</span></p></li>
            <li v-show="row.remark"><b>备 注：</b><span class="detail">{{row.remark?row.remark:'-'}}</span> </li>
            <li class="file" v-show="row.emailApprovalAccessoryList.length>0"><b>审批附件：</b></li>
          </ul>
          <MailFileApproval :list="row.emailApprovalAccessoryList" style="margin-bottom: 0;margin-left: 30px"
                            v-show="row.emailApprovalAccessoryList.length>0"></MailFileApproval>
        </div>
      </div>
      <div class="log" v-show="log.length>0">
        <h1 class="detail-title">操作日志：</h1>
        <avue-timeline pending time :time-width="100" class="timeline">
          <avue-timeline-item v-for="(item,index) in log" :key="index" >
            <div slot="time" style="font-size: 12px;color: #666">{{item.createTime}}</div>
            <div slot="content" style="font-size: 13px;color: #232323">{{item.content}}</div>
          </avue-timeline-item>
        </avue-timeline>
      </div>
    </div>
  </div>
</template>

<script>
    import MailFileDetail from '@/components/mail/file/MailFileDetail'
    import {getMailDetail} from "@/api/mail/make"
    import {mapState, mapGetters} from 'vuex'
    import {getToken} from '@/util/auth'
    import {getApprovalLog, rebackCheck, cancelApproval, getApprovalDetail} from '@/api/approval'
    import MailFileApproval from '@/components/mail/file/MailFileApproval'

    export default {
        name: "detail",
        components: {MailFileDetail, MailFileApproval},
        data() {
            return {
                content: {
                    addresseeEmail: '',//收件人邮箱数组
                    emailCarbonCopy: '',//抄送数组
                    emailSecretDelivery: '',//密送数组
                    emailHtmlpicList: [],//附件列表
                },
                isEndAll: false,
                host: '',
                mailId: '',
                token: '',
                log: [],
                row: {
                    emailApprovalAccessoryList:[]
                },
            }
        },
        computed: {
            ...mapState(['common']),
            ...mapGetters(["userInfo"]),
        },
        created() {
            this.token = "bearer " + getToken();
            if (process.env.NODE_ENV == 'production') {//生成环境
                this.host = 'https://' + location.host
            }else{
                this.host = 'http://192.168.0.6:1888'
            }
            this.getApprovalDetail();
        },
        methods: {
            //预览邮件内容
            toReview(){
                let routeUrl = this.$router.resolve({
                    name: '/mail/approval/review',
                    query: {
                        info: JSON.stringify(this.content)
                    }
                });
                window.open(routeUrl.href, '_blank');
            },
            backPrev(){
              this.$router.push('/mail/approval')
            },
            getApprovalDetail() {
                getApprovalDetail(this.$route.query.id).then(res => {
                    if (res.data.success) {
                        this.row = res.data.data;
                        this.mailId = this.row.emailInfoId;
                        this.getDetail();
                        this.getApprovalLog();
                    }
                })
            },
            getDetail() {
                getMailDetail(this.row.emailInfoId).then(res => {
                    if (res.data.success) {
                        this.content = res.data.data;
                        this.isEndAll = true;
                    }
                })
            },
            //重新提交
            rebackCheck() {
                this.$confirm(' <div style="margin: 20px 10px;">\n' +
                    '        <p style="line-height: 30px;\n' +
                    '        font-size: 14px;">确定重新提交主题为 <span class="more" style="color:#2A97F9">"' + this.row.approvalSubject + '"</span> 该审批单?</p></div>',
                    '提交审批', {
                        dangerouslyUseHTMLString: true,
                        confirmButtonText: '确 认',
                        cancelButtonText: '取 消'
                    }).then(() => {
                    rebackCheck(this.row.id).then(res => {
                        this.dealResult(res);
                    }).catch(err => {
                        console.log(err)
                    })
                }).catch(() => {
                })
            },
            //撤消审批
            cancelCheck() {
                this.$confirm(' <div style="margin: 20px 10px;">\n' +
                    '        <p style="line-height: 30px;\n' +
                    '        font-size: 14px;">确定要撤消主题为 <span class="more" style="color:#2A97F9">"' + this.row.approvalSubject + '"</span> 的审批单吗?</p></div>',
                    '撤消审批', {
                        dangerouslyUseHTMLString: true,
                        confirmButtonText: '确 认',
                        cancelButtonText: '取 消'
                    }).then(() => {
                    cancelApproval(this.row.id).then(res => {
                        this.dealResult(res);
                    }).catch(err => {
                        console.log(err)
                    })
                }).catch(() => {
                })
            },
            //再次编辑/查看 - 行数据
            editCheck() {
                //判断类型
                this.$router.push({
                    path: '/mail/approval/apply/edit',
                    query: {
                        row: JSON.stringify(this.row),
                        isApprovalDetail: 1
                    }
                })
            },
            dealResult(res) {//重置
                if (res.data.success) {
                    this.$message({
                        message: res.data.msg,
                        type: 'success'
                    });
                    this.backPrev();
                } else {
                    this.$message({
                        type: "success",
                        message: res.data.msg
                    });
                }
            },
            //日志获取
            getApprovalLog() {
                getApprovalLog(this.row.id).then(res => {
                    if (res.data.success) {
                        this.log = res.data.data
                    }
                })
            },
            filterStatus(type) {
                switch (parseInt(type)) {
                    case 0:
                        return '审批中';
                    case 1:
                        return '已撤消';
                    case 2:
                        return '已通过';
                    case 3:
                        return '不通过';
                    default:
                        return '-'
                }
            }
        }
    }
</script>

<style lang="scss" scoped>
  @import "../../../styles/relationEmail";
  @import "../../../styles/approvalDetail";
</style>
